<!DOCTYPE html>
<html lang="en">
    <head>
        <title>地图导航定位</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <style rel="stylesheet" type="text/css">
        /*去除正文区域内外的间距：全屏*/
        body{margin:0; padding:0;}
        /*地图加载容器的大小:全屏*/
        #container{
            width: 100%;
            height: 100vh;
        }
        </style>
    </head>
    <body>
        <!--
        注册高德平台账号：https://lbs.amap.com
        开发手册：https://lbs.amap.com/api/javascript-api-v2/summary
        创建应用，创建key
        -->

        <!--地图呈现容器-->
        <div id="container"></div>

        <script type="text/javascript">
            //将密钥设置到全局:后面很多代码都要用
            //当前window对象中挂载：_AMapSecurityConfig
            window._AMapSecurityConfig = {
              securityJsCode: "de65e43068abd546f49fa337e2aa98fc",
            };
        </script>
        //加载官方地图脚本：请附加申请的key
        <!--加载官方地图脚本：请附加申请的key-->
        <script
                type="text/javascript"
                src="https://webapi.amap.com/maps?v=2.0&key=ae069458a05f267d1c6f6214d4c36527"
        ></script>
        //官方代码，可以不用
<!--        <script src="https://webapi.amap.com/loader.js"></script>-->
<!--        <script type="text/javascript">-->
<!--            AMapLoader.load({-->
<!--              key: "ae069458a05f267d1c6f6214d4c36527", //申请好的Web端开发者 Key，调用 load 时必填-->
<!--              version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15-->
<!--            })-->
<!--              .then((AMap) => {-->
<!--                const map = new AMap.Map("container");-->
<!--              })-->
<!--              .catch((e) => {-->
<!--                console.error(e); //加载错误提示-->
<!--              });-->
<!--        </script>-->

<!--    //自定义脚本-->
        <script type="text/javascript">
            //这里的代码默认执行
            //创建地图对象，进行初始化('绑定的容器', {配置})
            var map = new AMap.Map(
                'container',                        //加载地图的容器id
                {
                    zoom: 25,                       //初始地图缩放比例
                    center: [121.474815, 31.237216] //初始中心点的[经度, 维度]
                }
            )

            //当前页面正式加载完毕后
            window.onload = function(){
                //调用鸿蒙端，代理注册过来的函数，设置定位点
                window.swift.setCurrentLocation()
            };

            //方法：定位设置
            function setLocation(lon,lat){
                //重新设置地图的中心点
                map.setZoomAndCenter(25,[lon,lat])

                //设置当前中心点的标记
                var marker = new AMap.Marker({
                map,
                icon:'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
                position:[lon,lat]
                });

                //加入到地图中
                map.add(marker)

                //为地图新增插件功能：搜索
                map.plugin(['AMap.PlaceSearch'],function(){
                    //创建搜索功能对象，提供搜索设置
                    var MSearch = new AMap.PlaceSearch({
                        map,
                        pageSize:4,
                        pageIndex:1,
                        extensions:'base'
                    });

                    //为地图设置监听：当前搜索结果完成时
                    AMap.Event.addListener(MSearch, 'complete' , (res)=>{
                        //调用鸿蒙方法，传回搜索结果
                        //通讯传递，只能是字符串string
                         window.swift.receiveNearPlace(JSON.stringify(res.poiList.pois))
                    });

                    //执行搜索功能：自动标记
                    MSearch.searchNearBy('停车场',[lon,lat]);

                });

            }
        </script>





    </body>
</html>